// 点位分布 // import Excels from '../components/Mains/Excels.vue' // 没有权限
<template>
  <div style="height: 100%; width: 100%">
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
          <el-form-item class="ml_15">
            <el-checkbox-group v-model="searchCriteria.checkList" :min="1">
              <el-checkbox :label="0">正常</el-checkbox>
              <el-checkbox :label="1">离线</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item class="ml_15">
            <el-input v-model.trim="searchCriteria.ZCMC_IP_XH" prefix-icon="el-icon-search" clearable placeholder="输入设备名称/设备IP" v-focus @clear="onSubmit"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
          </el-form-item>
        </el-form>
        <span>设备地图展示</span>
        <!-- 主机展示列表 -->
        <div>
          <div v-if="searchBtnSwitch">
            <ul class="ul_list" v-loading="tableLoad" v-if="tableData.length > 0">
              <li v-for="(item, index) in tableData" :key="index" :class="activeColor === index ? 'active' : ''" @click="selectChange(item, index)">
                <svg class="iconfont" aria-hidden="true">
                  <use :xlink:href="`#el-icon-my${item.icons}`" />
                </svg>
                <span>{{ item.zcmc }}{{ item.ip === '' ? '' : '(' + item.ip + ')' }}</span>
              </li>
            </ul>
            <ul class="ul_list" v-loading="tableLoad" v-else>
              <li>
                <span>{{ tableMessage }}</span>
              </li>
            </ul>
          </div>
          <div v-else style="padding: 0 15px 50px">
            <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
          </div>
        </div>
      </div>
    </div>
    <div class="main_r" :style="{ height: transferHeight.contentH + 'px' }" v-loading="mapLoad">
      <div id="container" :style="{ height: transferHeight.contentH + 'px' }"></div>
    </div>
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl'
import { threeLevelH } from '@/assets/js/calcHeight'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import treesBox from '@/components/treesBox/index.vue'
const AMap = window.AMap
export default {
  components: { treesBox },
  data() {
    return {
      treesBox: {
        url: 'ZI_CHAN',
        GZKZ: false,
        quoteType: true,
        ZCLX_XJ: 5,
      },
      activeColor: '',
      searchCriteria: {
        ZCMC_IP_XH: '',
        checkList: [0, 1],
      },
      tableData: [], // 列表
      tableLoad: false, // 表格加载中样式
      tableMessage: '',
      tableTimer: null, // 定时器
      typeList: [
        { zclx: 5, iconOffset: 'she_xiang_tou_zaixian', onIconOffset: 'she_xiang_tou_lixian' }, // 摄像机
        { zclx: 9, iconOffset: 'zhuai_pai_ji_zaixian', onIconOffset: 'zhuai_pai_ji_lixian' }, // 智能交通
      ],
      map: '',
      markerList: [], // 所有点标记
      index: 2,
      searchBtnSwitch: false,
      mapLoad: false,
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
        }
      }, timeLoad)
    },
  },
  created() {},
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: 90,
      }
    },
  },
  mounted() {
    var that = this
    var map = new AMap.Map('container') // 创建地图实例
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], function () {
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      var tool = new AMap.ToolBar({
        position: 'RT',
        offset: new AMap.Pixel(28, 20), // 工具条相对于基点的偏移位置
      })
      map.addControl(tool)
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale())
      // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // map.addControl(new AMap.OverView({ isOpen: true }))
      // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      // map.addControl(new AMap.MapType())
      // // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // map.addControl(
      //   new AMap.Geolocation({
      //     offset: new AMap.Pixel(0, 80), // 工具条相对于基点的偏移位置
      //   })
      // )
    })
    that.map = map
    this.initList('', 1)
  },
  methods: {
    // tree形搜索
    treeClick(e) {
      if (e.type.levels === 5) {
        console.log(e)
        this.selectChange(e.type)
      }
    },
    // 查询
    onSubmit() {
      this.searchBtnSwitch = true
      this.tableData = []
      this.initList(this.searchCriteria.ZCMC_IP_XH, 1)
    },
    // 点击当前摄像机改变地图位置和
    selectChange(item, index) {
      if (index) {
        this.activeColor = index
      }
      var that = this
      var lng = item.jd // 经度范围[121.138398, 121.728226]
      var lat = item.wd // 纬度范围[30.972688, 31.487611]
      this.map.setCenter([lng, lat]) // 设置地图中心点
      // console.log(lng, lat)
      this.map.setZoom(20) // 放大到街道
      const currentDeviceMarker = this.markerList.find((t) => t.G.extData.id === item.id)
      currentDeviceMarker.setzIndex(300) // 设置点标记叠加顺序
      // currentDeviceMarker.setAnimation('AMAP_ANIMATION_BOUNCE') // marker 弹跳动画
      var infowindow = this.getInfoContent(item)
      infowindow.open(this.map, [item.jd, item.wd])
      // 鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(currentDeviceMarker, 'click', function (e) {
        // 关闭信息窗体事件
        infowindow.on('close', () => {
          that.closeInfo(e)
        })
      })
    },
    // 资产名称和ip查询
    async initList(ZCMC_IP_XH, M_) {
      this.mapLoad = true
      // console.log(this.searchCriteria.checkList)
      var zxzt = ''
      if (this.searchCriteria.checkList.length === 1) {
        zxzt = this.searchCriteria.checkList[0]
      }
      const params = new URLSearchParams()
      params.append('ZCLX_XJ_LIST', JSON.stringify([5, 9]))
      params.append('ZXZT', zxzt)
      params.append('ZCMC_IP_XH', ZCMC_IP_XH)
      params.append('M_', M_) // 页数
      params.append('N_', 50) // 条数
      const { data: res } = await this.$http.post(`${ziC}zcgl/distributionOverview`, params)
      switch (res.code) {
        case '0000':
          // 进行下一次加载
          var index = this.index++
          this.initList('', index)
          var list = []
          res.data.list.forEach((item) => {
            // if (Number(item.jd) !== 0 && Number(item.wd) !== 0) {
            // item.icons = ''
            // var list_item = this.getIcons(item)
            var icons = ''
            if (item.flxid1 === 5 || item.flxid2 === 5 || item.flxid3 === 5) {
              // 摄像机 0-在线 1-不在线
              icons = this.typeList[0].iconOffset
              if (item.zxzt === 1) {
                icons = this.typeList[0].onIconOffset
              }
              // console.log('摄像机:', icons, '---状态：', item.zxzt)
            }
            if (item.flxid1 === 9 || item.flxid2 === 9 || item.flxid3 === 9) {
              // 智能交通 0-在线 1-不在线
              icons = this.typeList[1].iconOffset
              if (item.zxzt === 1) {
                icons = this.typeList[1].onIconOffset
              }
              // console.log('智能交通:', icons, '---状态：', item.zxzt)
            }
            // item.icons = icons
            this.$set(item, 'icons', icons)
            var list_item = item
            list.push(list_item)
            // console.log(`---${this.index}---`, list)
            this.tableData.push(list_item)
            // }
          })
          // this.tableData = list
          this.initAMap(res.data.list)
          break
        case '0013':
          this.mapLoad = false
          break
        default:
          // this.tableData = []
          // this.initAMap(this.tableData)
          break
      }
    },
    // 获取列表图标
    getIcons(item) {
      var icons = ''
      if (item.flxid1 === 5 || item.flxid2 === 5 || item.flxid3 === 5) {
        // 摄像机 0-在线 1-不在线
        icons = this.typeList[0].iconOffset
        if (item.zxzt === 1) {
          icons = this.typeList[0].onIconOffset
        }
      }
      if (item.flxid1 === 9 || item.flxid2 === 9 || item.flxid3 === 9) {
        // 智能交通 0-在线 1-不在线
        icons = this.typeList[1].iconOffset
        if (item.zxzt === 1) {
          icons = this.typeList[1].onIconOffset
        }
      }
      item.icons = icons
      return item
    },
    // 地图初始化
    initAMap(list) {
      var that = this
      // var map = new AMap.Map('container') // 创建地图实例
      // that.map = map
      // // 同时引入工具条插件，比例尺插件和鹰眼插件
      // AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], function () {
      //   // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      //   var tool = new AMap.ToolBar({
      //     position: 'RT',
      //     offset: new AMap.Pixel(28, 20), // 工具条相对于基点的偏移位置
      //   })
      //   map.addControl(tool)
      //   // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      //   map.addControl(new AMap.Scale())
      //   // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      //   // map.addControl(new AMap.OverView({ isOpen: true }))
      //   // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      //   // map.addControl(new AMap.MapType())
      //   // // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      //   // map.addControl(
      //   //   new AMap.Geolocation({
      //   //     offset: new AMap.Pixel(0, 80), // 工具条相对于基点的偏移位置
      //   //   })
      //   // )
      // })
      // 将 icon 传入 marker 循环生成
      var markerList = []
      list.forEach((item, index) => {
        // if (Number(item.jd) !== 0 && Number(item.wd) !== 0) {
        var iconCount = ''
        if (item.flxid1 === 5 || item.flxid2 === 5 || item.flxid3 === 5) {
          // 摄像机
          iconCount = 0
        }
        if (item.flxid1 === 9 || item.flxid2 === 9 || item.flxid3 === 9) {
          // 智能交通
          iconCount = 1
        }
        if (item.flxid1 === 53 || item.flxid2 === 53 || item.flxid3 === 53) {
          // 主机
          iconCount = 2
        }
        that.getMarker(markerList, iconCount, item, that.map)
        // }
      })
      // this.markerList = markerList // 存储marker点标记
      that.map.add(markerList)
    },
    // 获取点标记
    getMarker(markerList, iconCount, item, map) {
      // getMarker(iconCount, item, map) {
      var that = this
      var icon = -(28 * iconCount + 5 * iconCount)
      var marker = new AMap.Marker({
        icon: that.initIcon(icon),
        position: new AMap.LngLat(item.jd, item.wd), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: item.zcmc, // 鼠标划过提示文字
        extData: { id: item.id },
        cursor: 'pointer',
      })
      that.getInfo(map, marker, item) // 信息面板
      markerList.push(marker)
      that.markerList.push(marker) // 存储marker点标记
      return markerList
    },
    // 获取信息窗体内容
    getInfoContent(item) {
      // 摄像头0-在线 1-不在线
      var content = `
        <div><span>资产名称：</span>${item.zcmc}</div>
        <div><span>资产类型：</span>${item.zclxmc1 ? item.zclxmc1 + ' / ' : ''}${item.zclxmc2 ? item.zclxmc2 + ' / ' : ''}${item.zclxmc}</div>
        <div><span>IP：</span><svg class="iconfont" aria-hidden="true">
                <use xlink:href="#el-icon-myLAN_${Number(item.zxzt) === 0 ? 'network' : 'Nonetwork'}" />
              </svg>
        ${item.ip}</div>
        <div><span>品牌：</span>${item.ppmc}</div>
        <div><span>型号：</span>${item.xh}</div>
        <div><span>安装地址：</span>${item.sfmc + item.csmc + item.qxmc + item.xzjdmc + item.xxdz}</div>
        <div><span>经纬度：</span>${item.jd},${item.wd}</div>`
      var infowindow = new AMap.InfoWindow({
        content: content, // 信息窗体的内容
        offset: new AMap.Pixel(-12, -5),
      })
      return infowindow
    },
    // 获取信息面板
    getInfo(map, marker, item) {
      var that = this
      var infowindow = that.getInfoContent(item)
      // 鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(marker, 'click', function (e) {
        marker.setzIndex(300) // 设置点标记叠加顺序
        // 点击之后切换图标
        // e.target.setIcon(that.initIcon(-38)) // 换成橘黄色的
        infowindow.open(map, marker.getPosition())
        // 关闭信息窗体事件
        infowindow.on('close', () => {
          that.closeInfo(e)
        })
      })
    },
    // 关闭信息窗体事件
    closeInfo(marker) {
      marker.target.setzIndex(100) // 关闭窗体重置点标记堆叠顺序
      // console.log(marker.target.getIcon('imageOffset'))
      // marker.target.setIcon(this.initIcon(-5)) // 换成蓝色的
    },
    // 获取图标
    initIcon(offsetX) {
      // console.log('offsetX:', offsetX)
      // 创建一个 Icon // 点标记显示内容，HTML要素字符串
      const icon = new AMap.Icon({
        // 图标的取图地址
        image: require('@/assets/images/coordinate.png'), // 自定义点标记覆盖物内容
        // 所用图片大小缩放两倍
        imageSize: new AMap.Size(203, 40),
        // 展示图标尺寸
        size: new AMap.Size(28, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(offsetX, 0), // 每个相加33(28+5)
      })
      return icon
    },
    // 关闭信息窗体
    closeInfoWindow(map) {
      map.clearInfoWindow()
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .anchorBL {
  display: none;
}
::v-deep .name {
  padding: 10px 0 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
::v-deep .bubble {
  width: 50px;
  height: 50px;
  padding: 0 5px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background-color: pink;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  cursor: pointer;
}
// 地图弹窗
::v-deep div.info-top {
  background-color: #fff;
  border-bottom: none;
}
::v-deep .amap-info-content {
  border: 1px solid #e4e7ed;
  box-shadow: 0px 2px 12px 0px rgb(0 0 0 / 20%);
  padding: 20px 30px 20px 20px;
  position: relative;
  width: 460px;
  box-sizing: border-box;
  div {
    position: relative;
    // font-weight: 400;
    color: #333333;
    font-size: 12px;
    height: auto;
    line-height: 20px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
    word-break: break-all; // 允许在单词换行
    span {
      &:first-child {
        position: absolute;
        left: 0;
        display: inline-block;
        width: 60px;
        text-align: right;
        color: #7a7a7a;
      }
    }
    .iconfont {
      width: 16px;
      height: 14px;
      transform: translate(-3px, 2px);
    }
  }
}
// 弹窗关闭按钮
::v-deep .amap-info-close {
  font-size: 20px !important;
  top: 15px;
  right: 15px !important;
}
// 三角形
::v-deep .amap-info-sharp {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-top: 0px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-image: none;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.t_container {
  height: 100%;
  .el-col {
    height: 100%;
  }
}
.tree-box.moreLine {
  width: 288px;
  padding: 0 0 15px;
  .el-input {
    width: 195px;
  }
  .el-form--inline .el-form-item {
    margin-bottom: 0;
    // margin-right: 0;
    &.ml_15 {
      margin-left: 15px;
    }
    // &:first-child {
    //   margin-left: 15px;
    // }
    &:last-child {
      margin-right: 0;
    }
  }
  > div {
    > span {
      padding: 10px 15px;
    }
  }
}
.main_r {
  margin-left: 288px;
  width: calc(100%-288);
  padding: 0;
  // width: 100%;
  height: 100%;
  > div {
    width: 100%;
    height: 100%;
  }
}
.ul_list {
  min-height: 100px;
  padding-bottom: 56px;
  > li {
    position: relative;
    line-height: 28px;
    padding: 0 15px;
    &.active {
      color: #1989fa;
      background-color: #e5f5ff;
      &:hover {
        cursor: pointer;
        background-color: #e5f5ff;
        opacity: 1;
      }
    }
    &:hover {
      cursor: pointer;
      color: #1989fa;
      background-color: #f2f2f2;
      opacity: 0.5;
    }
    > span {
      padding-left: 17px;
      display: block;
      height: 100%;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .iconfont {
      margin-right: 5px;
      width: 12px;
      height: 14px;
      // vertical-align: text-bottom;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
